<template>
	<view class="mine">
		<view class="form-box" >
			<uni-forms ref="masterEnterForm" :modelValue="FormData" :rules="rules" label-width="114rpx">
				<uni-forms-item name="price">
					<template slot="label">
						<view class="label">
							发票金额
						</view>
					</template>
					<input type="text" placeholder="请输入" placeholder-class="placeholder-class" v-model="FormData.price" style="text-align: right;" />
				</uni-forms-item>
				<uni-forms-item name="id">
					<template slot="label">
						<view class="label">
							发票类型
						</view>
					</template>
					<view class="row-end" @click="selectShow = true">
						<view style="text-align: right;">
							<text class="placeholder-class" v-if="FormData.type == ''">请选择</text>
							<text v-else>{{forrmatterEnmu(columns[0], FormData.type)}}</text>
						</view>
						<uni-icons type="right" color="#666" size="36rpx"></uni-icons>
					</view>
				</uni-forms-item>
				<uni-forms-item name="id">
					<template slot="label">
						<view class="label">
							抬头类型
						</view>
					</template>
					<view class="row-end">
						<radio-group @change="changeGroup" class="radio-box">
							<label v-for="item in identityArr" :key="item.value" class="raio-item">
								<radio 
									style="transform:scale(0.7)" 
									color="#007aff" 
									activeBackgroundColor="#007aff"
									:value="item.value" :checked="item.value==FormData.topic1" />{{item.label}}
							</label>
						</radio-group>
					</view>
				</uni-forms-item>
				<uni-forms-item name="price">
					<template slot="label">
						<view class="label">
							发票抬头
						</view>
					</template>
					<input type="text" 
						placeholder="填写需要开具发票的企业名称" 
						placeholder-class="placeholder-class" 
						v-model="FormData.price" style="text-align: right;" />
				</uni-forms-item>
				<uni-forms-item name="price">
					<template slot="label">
						<view class="label">
							税号
						</view>
					</template>
					<input type="text" 
						placeholder="纳税人识别号" 
						placeholder-class="placeholder-class" 
						v-model="FormData.price" style="text-align: right;" />
				</uni-forms-item>
			</uni-forms>
		</view>
		
		<you-bottom-btn :btnConfig="bottomBtnConfig" @formSubmit="formSubmit">
		</you-bottom-btn>
		<u-picker 
			:show="selectShow" 
			:columns="columns" 
			keyName="label" 
			@cancel="selectShow = false" 
			@confirm="confirm"></u-picker>
	</view>
</template>

<script>
	import {forrmatterEnmu} from '@/utils/index.js'
	export default {
		data() {
			return {
				FormData: {
					price: "",
					type: ""
				},
				rules: {},
				selectShow: false,
				columns: [
					[{
						label: "增值税发票",
						value: "1"
					},
					{
						label: "普通发票",
						value: "2"
					}]
				],
				identityArr: [
					{
						label: "个人或事业单位",
						value: "1"
					},
					{
						label: "企业",
						value: "2"
					}
				],
				bottomBtnConfig: [{
					text: '提交开票信息申请',
					class: 'confirm',
					funcName: 'formSubmit'
				}],
			}
		},
		methods: {
			forrmatterEnmu,
			confirm({value}) {
				this.$set(this.FormData, 'type', value[0].value);
				this.selectShow = false;
			},
			changeGroup() {
				
			},
			formSubmit() {
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	.mine {
		background: #F6F8FA;
		width: 100vw;
		height: 100vh;
		box-sizing: border-box;
		padding: 0 28rpx;
		line-height: 1;
	}
	/deep/.placeholder-class {
		font-size: 26rpx;
		color: $main-font-auxiliary;
		line-height: 1;
	}
	.form-box {
		background-color: #fff;
		border-radius: 12rpx;
		padding: 30rpx 24rpx;
		margin-top: 20rpx;
		.label {
			font-size: 24rpx;
			&::before {
				content: "*";
				color: red;
				font-size: 30rpx;
				display: inline-block;
				margin-right: 10rpx;
				width: 5rpx;
				height: 20rpx;
			}
		}
	}
</style>